<template>
	<view class="container">
		<view class="form-container">
			<view class="form-item">
				<text class="label">底座名称<text class="required">*</text></text>
				<input type="text" v-model="formData.dzname" placeholder="请输入底座名称" class="input" />
			</view>

			<view class="form-item">
				<text class="label">上底座水平长<text class="required">*</text></text>
				<input type="number" v-model="formData.dzsheight" placeholder="请输入上底座水平长" class="input" />
			</view>

			<view class="form-item">
				<text class="label">上底座高<text class="required">*</text></text>
				<input type="number" v-model="formData.dzslen" placeholder="请输入上底座高" class="input" />
			</view>

			<view class="form-item">
				<text class="label">下底座水平长<text class="required">*</text></text>
				<input type="number" v-model="formData.dzxlen" placeholder="请输入下底座水平长" class="input" />
			</view>

			<view class="form-item">
				<text class="label">下底座高<text class="required">*</text></text>
				<input type="number" v-model="formData.dzxheight" placeholder="请输入下底座高" class="input" />
			</view>
		</view>

		<view class="button-container">
			<button class="save-button" @click="handleSave">保存</button>
		</view>

		<uni-popup ref="messagePopup" type="message">
			<uni-popup-message :type="messageType" :message="message" :duration="2000" />
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'; // 导入路由对象
	import wbdz from '../../../api/wanbi/wbdz';

	const messagePopup = ref();
	const messageType = ref('error');
	const message = ref('');

	const formData = ref({
		wbdzid: '',
		dzname: '',
		dzslen: '',
		dzsheight: '',
		dzxlen: '',
		dzxheight: ''
	});
	// 定义响应式变量
	const currentType = ref < number > (0); // 初始化默认值
	// 获取路由对象
	const route = useRoute();
	//生命周期函数
	onMounted(() => {
		// 从路由 query 中获取 type 参数
		const type = route.query.dzid;
		// 类型检查和转换
		if (type !== undefined && typeof type === 'string') {
			currentType.value = parseInt(type);
		}
		wbdz.listByWbdzId(currentType.value).then((res: any) => {
			console.log(res)
			// 响应式数据
			formData.value = res.data;
		})
	})

	const showMessage = (msg: string, type: 'success' | 'error' = 'error') => {
		message.value = msg;
		messageType.value = type;
		messagePopup.value.open();
	};

	const validateForm = () => {
		if (!formData.value.dzname) {
			showMessage('请输入底座名称');
			return false;
		}
		if (!formData.value.dzsheight) {
			showMessage('请输入上底座水平长');
			return false;
		}
		if (!formData.value.dzslen) {
			showMessage('请输入上底座高');
			return false;
		}
		if (!formData.value.dzxheight) {
			showMessage('请输入下底座水平长');
			return false;
		}
		if (!formData.value.dzxlen) {
			showMessage('请输入下底座高');
			return false;
		}
		return true;
	};

	const handleSave = () => {

		if (!validateForm()) return;

		wbdz.updata(formData.value).then;

		showMessage('保存成功', 'success');
	};
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		min-height: 100%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.form-container {
		flex: 1;
		padding: 0 30rpx;
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.label {
		font-size: 14px;
		color: #333333;
	}

	.required {
		color: #ff4d4f;
		margin-left: 4rpx;
	}

	.input {
		flex: 1;
		text-align: right;
		font-size: 14px;
		color: #333333;
		padding: 0 20rpx;
	}

	.button-container {
		padding: 40rpx 30rpx;
	}

	.save-button {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #ff4d4f;
		color: #ffffff;
		font-size: 16px;
		border-radius: 44rpx;
		text-align: center;
	}

	.save-button:active {
		opacity: 0.8;
	}

	.cursor-pointer {
		cursor: pointer;
	}
</style>
